<template>
	<view>
		<!-- 搜索框 -->
		<custom_search></custom_search>
		
		<!-- 轮播图 -->
		<swiper circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper-wrap">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<navigator class="swiper-item" :url="`/fenbao_one/swiper_detail/swiper_detail?goods_id=${item.goods_id}`">
					<image :src="item.image_src" mode=""></image>
				</navigator>
			</swiper-item>
		</swiper>
		
		<!-- 导航区 -->
		<view class="ul">
			<view class="li" v-for="(item,index) in navList" :key="index" @click="goNavItem(item)">
				<image :src="item.image_src" mode=""></image>
			</view>
		</view>
		
		<!-- 楼层 -->
		<view class="floor-warp">
			<view class="floor-item" v-for="(item,index) in floorList" :key="index">
				<image :src="item.floor_title.image_src" mode="" class="image_top"></image>
				<view class="floor-item-item" enable-flex="true">
					<navigator class="left" :url="item.product_list[0].url">
						<image :src="item.product_list[0].image_src" mode=""></image>
					</navigator>
					<view class="right">
						<navigator class="right-item" v-for="(item,index) in item.product_list" :key="index" v-if="index !== 0" :url="item.url">
							<image :src="item.image_src" mode=""></image>
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {swiperdata,catitemsdata,floordata} from "@/api/home_request.js";
	export default {
		data() {
			return {
				swiperList:[],
				navList:[],
				floorList:[]
			};
		},
		onLoad(){
			this.getSwiperData();
			this.getCatItemsData();
			this.getFloorData()
		},
		methods:{
			//请求轮播图数据
			async getSwiperData() {
				const { data: res } = await swiperdata();
				// console.log(res);
				// res 相当于result.data
				// console.log(result.data);
				// 在data当中设计初始值 在template当中进行渲染
				if (res.meta.status !== 200) return uni.$showMsg();
				this.swiperList = res.message
			},
			//请求导航区的数据
			async getCatItemsData() {
				const { data: res } = await catitemsdata();
				// console.log(res);
				if (res.meta.status !== 200) return uni.$showMsg();
				this.navList = res.message
			},
			//请求楼层数据
			async getFloorData() {
				const { data: res } = await floordata();
				console.log(res);
				if (res.meta.status !== 200) return uni.$showMsg();
				//给楼层数据当中的product_list 里的每一项 都加一个url
				res.message.forEach(floor=>{
					floor.product_list.forEach(prod=>{
						prod.url = '/fenbao_one/floor_list/floor_list?' + prod.navigator_url.split('?')[1];
					})
				})
				this.floorList = res.message;
			},
			goNavItem(item){
				if(item.name === "分类"){
					uni.switchTab({
						url:"/pages/cate/cate"
					})
				}else if(item.name === "秒杀拍"){
					uni.navigateTo({
						url:'/fenbao_one/nav_msp/nav_msp'
					})
				}else if(item.name === "超市购"){
					uni.navigateTo({
						url:'/fenbao_one/nav_csg/nav_csg'
					})
				}else if(item.name === "母婴品"){
					uni.navigateTo({
						url:'/fenbao_one/nav_myp/nav_myp'
					})
				}
			}
		}
	}
</script>

<style lang="scss">

	.swiper-wrap {
		width: 100%;
		height: 340rpx;
	
		.swiper-item,image {
			width: 100%;
			height: 100%;
		}
	}
	.ul {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 20rpx 10rpx;
	
		.li {
			// width: 25%;
			image {
				width: 130rpx;
				height: 140rpx;
			}
		}
	}
	.floor-warp{
		width: 100%;
		height: 400rpx;
		.floor-item{
			margin: 20rpx 0 0 10rpx;
			.image_top{
				width: 100%;
				height: 60rpx;
			}
			.floor-item-item{
				display: flex;
				// flex-wrap: wrap;
				justify-content: space-around;
				.left{
					width: 30%;
					height: 400rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.right{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					// align-items: center;
					width: 66%;
					height: 400rpx;
					.right-item{
						image{
							width: 230rpx;
							height: 190rpx;
							margin-bottom: 10rpx;
						}
					}
				}
			}
		}
	}
</style>
